import React from 'react'
import './new-user-guide.css'
import step1Src from '../../../../../../res/images/web/new-user-guide/引导1.png'
import step2Src from '../../../../../../res/images/web/new-user-guide/引导2.png'
import step3Src from '../../../../../../res/images/web/new-user-guide/引导3.png'
import step4Src from '../../../../../../res/images/web/new-user-guide/引导4.png'
import {log} from "../../../../../../utils/commonfunc";
function throttle(fn, delay,){
    let valid = true
    return function(event) {
        event.persist()
        if (!valid){
            return false
        }
        valid = false
        setTimeout(function() {
            fn(event)
            valid = true
        }, delay)
    }
}
function debounce(fn,delay){
    let timer = null //借助闭包
    return function(event) {
        event.persist()
        if(timer){
            clearTimeout(timer) //进入该分支语句，说明当前正在一个计时过程中，并且又触发了相同事件。所以要取消当前的计时，重新开始计时
            timer = setTimeout(() => fn(event),delay)
        }else{
            timer = setTimeout(() => fn(event),delay) // 进入该分支说明当前并没有在计时，那么就开始一个计时
        }
    }
}

class NewUserGuide extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            index: 0,
            steps: [
                {src: step1Src},
                {src: step2Src},
                {src: step3Src},
                {src: step4Src},
            ],
            start: 0,
            moving: false,
        }
    }

    prev() {
        const cur = this.state.index
        const prev = cur - 1
        if (prev < 0) {
            return
        }
        this.setState({
            index: prev,
            moving: true,
        })
    }

    next() {
        const cur = this.state.index
        const next = cur + 1
        if (next > this.state.steps.length - 1) {
            return
        }
        this.setState({
            index: next,
            moving: true,
        })
    }

    skip = () => {
        this.props.endSteps()
    }

    onTouchStart = (e) => {
        let point = e.touches[0]
        let start = point.screenX
        this.setState({
            start,
        })
    }

    onTouchMove = (e) => {
        if (this.state.moving) {
            return
        }
        let point = e.touches[0]
        let start = this.state.start
        let end = point.screenX
        let diff = end - start
        if (diff > 0) {
            this.prev()
        } else if (diff < -0) {
            this.next()
        }
    }

    onTouchEnd = (e) => {
        this.setState({
            start: 0,
        })
    }

    render() {
        const steps = this.state.steps
        const isLast = this.state.index === steps.length - 1
        const switchButtons =<>
            <button
                className='guide-item-button guide-item-button-skip'
                onClick={() => this.skip()}
            >
                跳过全部
            </button>
            <button
                className='guide-item-button guide-item-button-next'
                onClick={() => this.next()}
            >
                下一步
            </button>
        </>
        const activeDot = <div className='active-dot'/>
        const inactiveDot = <div className='inactive-dot'/>
        const dots = <div className='dots-container'>
            {steps.map((s, i) => i === this.state.index ? activeDot : inactiveDot)}
        </div>
        return <div
            className='new-user-guide flex scale-in-center'
        >
            {!isLast && switchButtons}
            {dots}
            {steps.map((step, index) => {
                const src = step.src
                const cur = this.state.index
                const x = 0 - cur * window.innerWidth
                const translateX = `translateX(${x}px)`
                const isLast = index === steps.length - 1

                const endButtons = <button
                    className='guide-item-button guide-item-button-end'
                    onClick={this.props.endSteps}
                >进入比赛</button>
                return <div
                    key={index}
                    className='carousel-item'
                    style={{
                        background: `no-repeat url(${src}) 50% 50%/contain,black`,
                        transform: translateX,
                    }}
                    onTouchStart={this.onTouchStart}
                    onTouchMove={this.onTouchMove}
                    onTouchEnd={this.onTouchEnd}
                    onTransitionEnd={() => this.setState({moving: false,})}
                >

                    {isLast && endButtons}
                </div>

            })}
        </div>
    }
}

export default NewUserGuide